<template>
  <div>
    <Form ref="formInline" :model="map" inline>
      <div class="search">
        <Button type="primary" class="fl" icon="plus" @click="add">增加用户</Button>
        <Button type="primary" class="fl" icon="plus" @click="tagList" style="margin-left: 20px;">用户标签管理</Button>
        <FormItem>
          <Select v-model="map.role_id" style="width:200px;">
            <Option
              v-for="item in roleList"
              :value="item.value"
              :key="item.value"
            >{{ item.label }}
            </Option>
          </Select>
        </FormItem>
        <FormItem>
          <Input type="text" v-model="map.key" placeholder="关键字"></Input>
        </FormItem>
        <FormItem>
          <Button type="primary" @click="getList">查询</Button>
        </FormItem>
      </div>
    </Form>
    <Table border stripe :loading="loading" :columns="columns" :data="data && data.data" :height="500"></Table>
    <Page class="page" :total="data && data.count" :page-size="data && data.pagesize" show-total @on-change="changePage"></Page>

  </div>
</template>
<script>
  import {role, user} from "@/api";
  import {Button, Form, FormItem, Input, Option, Page, Select, Table, Tag} from 'iview';

  export default {
    components: {
      Button,
      Table,
      Page,
      Form,
      FormItem,
      Input,
      Select,
      Option,
      Tag,
    },
    data() {
      return {
        loading: true,
        columns: [
          {
            title: "用户姓名",
            key: "username"
          },
          {
            title: "Email",
            key: "email"
          },
          {
            title: "Mobile",
            key: "mobile"
          },
          {
            title: "已删除",
            key: "deleted_flag",
            align: "center",
            sortable: true,

            render: (h, params) => {
              return h('span', params.row.deleted_flag ? '已删除' : '正常');
            }
          },
          {
            title: "登录次数",
            key: "login_count"
          },
          {
            title: "最后登录时间",
            key: "last_login_time",
            width: 150,
            align: "center",
            render: (h, params) => {
              if(!params.row.last_login_time) return "";
              return h('span', new Date(params.row.last_login_time * 1000).toLocaleString());
            }
          },
          {
            title: "角色",
            key: "roles",
            width: 300,
            align: "left",
            render: (h, params) => {
              if(!params.row.roles) return "";
              let roles = [];
              for (let r of params.row.roles) {
                roles.push(h("Tag", {
                  props: {
                    type: "border",
                    size: 'small',
                    closable: true,
                    color: 'primary',
                    name:r.id
                  },
                  on: {
                    "on-close": (event, name) => {
                      const role_id = name;
                      const user_id = params.row.id;
                      role.deleteUser(role_id, user_id).then(res => {
                        const index = params.row.roles.findIndex((role) => {
                          return role.id === name;
                        });
                        params.row.roles.splice(index, 1)
                      });
                    }
                  }
                }, r.title));
              }
              return h('div', roles);
            }
          },
          {
            title: "标签",
            key: "tags",
            width: 300,
            align: "left",
            render: (h, params) => {
              if(!params.row.tags) return "";
              let roles = [];
              for (let r of params.row.tags) {
                roles.push(h("Tag", {
                  props: {
                    type: "border",
                    size: 'small',
                    closable: true,
                    color: 'primary',
                    name: r.id,
                  },
                  on: {
                    "on-close": (event, name) => {
                      const tag_id = name;
                      const user_id = params.row.id;
                      user.deleteTag(user_id, tag_id).then(res => {
                        //this.getList();
                        const index = params.row.tags.findIndex((tag) => {
                          return tag.id === name;
                        });
                        params.row.tags.splice(index, 1)
                      });
                    }
                  }
                }, r.title));
              }
              return h('div', roles);
            }
          },
          {
            title: "操作",
            key: "action",
            width: 150,
            align: "center",
            render: (h, params) => {
              return h("div", [
                h(
                  "Button",
                  {
                    props: {
                      type: "primary",
                      size: "small",
                      // icon: 'ios-list'
                    },
                    style: {
                      marginRight: "5px"
                    },
                    on: {
                      click: () => {
                        this.$router.push({
                          path: "/ucenter/user/save",
                          query: {
                            id: params.row.id
                          }
                        });
                      }
                    }
                  },
                  '编辑'
                ),
                h(
                  "Button",
                  {
                    props: {
                      type: "error",
                      size: "small",
                      // icon: 'trash'
                    },
                    on: {
                      click: () => {
                        if(confirm("确定要删除吗？")) {
                          this.delete(params.row.id, params.index);
                        }
                      }
                    }
                  },
                  '删除'
                )
              ]);
            }
          }
        ],
        data: {},
        map: {
          page: 1,
          key: "",
          pageSize: 10,
        },

        roleList: [],
      };
    },
    methods: {
      getList() {
        this.loading = true;
        user.getList(this.map).then(res => {
          this.data = res.data;
          this.loading = false;
        });
      },
      delete(id, index) {
        user.delete(id).then(res => {
          // this.data.splice(index, 1);
          this.getList();
        });
      },
      changePage(index) {
        this.map.page = index;
        this.getList();
      },
      add() {
        this.$router.push('/ucenter/user/save');
      },

      tagList(){
        this.$router.push('/ucenter/tag/list');
      },
      async getRoleList() {
        this.loading = true;
        const map = {page: 0};
        let data = await role.getList(map);
        this.roleList = data.data.map(item => {
          return {
            value: item.id,
            label: `[${item.name}]${item.title}`
          };
        });
        this.roleList.unshift({value: "", label: "请选择角色"});
        this.loading = false;
      },
    },
    mounted() {
      if(this.$route.query.role_id) {
        this.map.role_id = this.$route.query.role_id;
      }

      this.getList();
      this.getRoleList();
    }
  };
</script>
